<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>08overflow文字省略效果</title>
    <style type="text/css">
      .ul {
        width: 400px;
      }
      
      /* overflow: hidden; 截取多余部分 */
      /* white-space: nowrap; 文字不换行 */
      /* text-overflow: ellipsis; 后面几个文字变成 ... */
      .ul>li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <ul class="ul">
      <li>一二三四五六七八九十二二三四五六七八九十三二三四五六七八九十</li>
      <li>一二三四五六七八九十二二三四五六七八九十三二三四五六七八九十</li>
      <li>一二三四五六七八九十二二三四五六七八九十三二三四五六七八九十</li>
      <li>一二三四五六七八九十二二三四五六七八九十三二三四五六七八九十</li>
      <li>一二三四五六七八九十二二三四五六七八九十三二三四五六七八九十</li>
      <li>一二三四五六七八九十二二三四五六七八九十三二三四五六七八九十</li>
      <li>一二三四五六七八九十二二三四五六七八九十三二三四五六七八九十</li>
    </ul>
  </body>
</html>